import './css/socialSecurity.css'
import pic from './../assets/pic.png'
import { Image, Input, Form, Button, message } from 'antd'
import Captcha from 'react-captcha-code';
import { get } from '../https';
import { useParams, useLocation } from 'react-router-dom'
import qu from '../units/code'
import React, { useEffect } from 'react'



  const socialSecurity: React.FC = () => {
    const [messageApi, contextHolder] = message.useMessage();
    const qus: any = qu(window.location.href);
    let codes = 0;
    const handleClick = (code: any) => {
        codes = code;
    }


    const onFinish = (values: any) => {

        if (!values.vs) {
            messageApi.open({
                type: 'error',
                content: '请输入验证码',
            });

            return;
        }
        if (values.vs == codes) {
            get('https://shebao.nywuji.com/api/home/verification', { type: qus.type, code: qus.code }).then(res => {
                if(res.code==0){
                    messageApi.open({
                        type: 'error',
                        content:res.msg,
                    });
                }else if(res.code==1){
                    messageApi.open({
                        type: 'success',
                        content:res.msg,
                    });
                }
            })
        } else {
            messageApi.open({
                type: 'error',
                content: '验证码错误',
            });
        }

    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        
        <div className='app'>
             {contextHolder}
            <h3>内蒙人社电子表单在线验证平台</h3>
            <Image src={pic} width={'90%'} height={150} />
            <Form style={{ marginTop: '5px', width: '90%' }}
                initialValues={{ code: qus.code }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}>
                <Form.Item
                    name="code"
                >
                    <Input />
                </Form.Item>
                <Form.Item name='vs'>
                    <div className='code'>
                        <Input   />
                        <Captcha className='canvas' height={30} charNum={4} onChange={handleClick} />
                    </div>
                </Form.Item>
                <Form.Item >
                    <Button className='btn' htmlType="submit">查询</Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default socialSecurity